<template>
  <el-dialog
    class="public-dialog"
    title="申请付款"
    width="560"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div>
      <div
        class="pay-desc bg-[var(--base-primary-bg)] rounded-[8px] py-[8px] pb-[0.1px] px-[8px] mb-[16px]"
      >
        <Descriptions
          class="inline-flex"
          v-for="item in headInfo"
          labelWidth="88px"
          :key="item.label"
          :label="item.label"
          :value="`${data[item.field] || '-'} ${
            (item.currency && data.currency) || ''
          }`"
        />
      </div>
      <VForm
        ref="form"
        :model="model"
        :fieldList="fieldList"
        :options="formOption"
        :rules="rules"
        :disabled="disabled"
        :originOption="optionsData"
      >
        <template #request_pay_amount_append>{{ data.currency }}</template>
      </VForm>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import VForm from "@/components/Form/index.vue";
import Descriptions from "@/components/Descriptions/index.vue";
import { useEnumSelect } from "@/hooks";
import { applyPay } from "../../api";
const { options: optionsData } = useEnumSelect({
  params: ["finance_rp_type"],
});
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  data: { type: Object, default: () => ({}) },
});

const emit = defineEmits(["update:modelValue", "refresh", "close"]);

const formOption = {
  labelPosition: "top",
  inline: true,
};

const headInfo = [
  { label: "账单号", field: "bill_number" },
  { label: "物流商名称", field: "logistics_name" },
  { label: "账单金额", field: "logistics_amount", currency: true },
  { label: "汇率", field: "exchange_rate" },
];

const rules = {
  request_pay_amount: [
    { required: true, message: "请输入申付金额", trigger: "blur" },
  ],
  rp_type: [{ required: true, message: "请选择申请项目", trigger: "blur" }],
};

const form = ref();
const model = ref({});
const loading = ref();
const orderData = ref();
// const optionsData = ref({});

const fieldList = [
    {
    field: "rp_type",
    label: "申请项目",
    type: "radio",
    originField:"finance_rp_type"
   
  },
  {type:'br'},
  {
    field: "request_pay_amount",
    label: "申付金额",
    append: "request_pay_amount_append",
    type: "number",
    min: 0,
    max: 99999999999999,
  },
  {
    field: "remark",
    label: "备注",
    type: "textarea",
    full: true,
    itemStyle: { width: "100%" },
    autosize: { minRows: 4, maxRows: 8 },
  },
];

const handleSave = async () => {
  try {
    const formInfo = await form.value.submit();

    const { id } = props.data;

    console.warn(formInfo, id);

    const reqParams = { id, ...formInfo };
    const { code, message,data } = await applyPay(reqParams);
    if (code !== 200) {
      ElMessage.warning(message);
      return;
    }
    if (data?.success_data?.length) {
      ElMessage.success({
        dangerouslyUseHTMLString: true,
        message: data.success_data.join("<br/>"),
      });
    }
    if (data?.fail_data?.length) {
      ElMessage.error({
        dangerouslyUseHTMLString: true,
        message: data.fail_data.join("<br/>"),
      });
    }
    handleClose(true);
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  model.value = {};
  await nextTick();
  form.value.resetForm();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped>
.pay-desc {
  :deep(.descriptions) {
    display: inline-flex;
    .value {
      min-width: 196px;
    }
    &:nth-child(3),
    &:last-child {
      .value {
        min-width: 138px;
      }
    }
  }
}
</style>
